<template>
  <div class="wap-container orderConfirm" id="container">
    <section class="top mt10 mr10 ml10 bgfff">
      <div class="top-title">
        报修信息
      </div>
      <div class="order-info">
        <ul class="pl20 pb15">
          <li class="rowflex">
            <div class="info-item c666 letterSpacing">工单号</div>
            <div>{{orderInfo.code}}</div>
          </li>
          <li v-if="orderInfo.equipment"   class="rowflex">
            <div class="info-item c666">设备编号</div>
            <div>{{orderInfo.equipment.equipmentNo}}</div>
          </li>
          <li v-if="orderInfo.equipment" class="rowflex">
            <div class="info-item c666">设备类型</div>
            <div>{{orderInfo.equipment.equipmentType}}</div>
          </li>
          <li class="rowflex">
            <div class="info-item c666 letterSpacing">工程师</div>
            <div>{{orderInfo.engineer.nickName}}</div>
          </li>
          <li class="rowflex">
            <div class="info-item c666">联系电话</div>
            <div>{{orderInfo.engineer.mobile}}</div>
          </li>
          <li v-if="orderInfo.errorDescription" class="rowflex">
            <div class="info-item c666">报修内容</div>
            <div class="repair-content">{{orderInfo.errorDescription}}</div>
          </li>
        </ul>
        <div class="picAndvioce-box ">
          <div v-if="picList.length > 0" class="pics rowflex">
            <div @click="show(index)" v-for="(item,index) in picList" class="picItem previewer-img" v-bind:style="{backgroundImage: 'url(http://'+item+')', backgroundSize: 'cover' }"></div>
          </div>
          <div v-if="Gparam.vioce.vio" class="vioce mt15 mb15 rowflex" @click="readVioce()">
            <div class="readVioce">
              <img src="~assets/images/icon_xingxing_nol@2x.png"/>
              <span>{{Gparam.vioce.time+'"'}}</span>
            </div>
            <audio class="mp3">
              <source src="~assets/images/music.mp3" type="audio/mpeg">
            </audio>
            <div v-if="!Gparam.vioce.isRead"  class="isRead" src="images/icon_bitian@2x.png"></div>
          </div>
        </div>
      </div>
    </section>
    <section v-for="(item,index) in serviceList"  @click="chooseService(item)" v-bind:class="{typeMark: item.isChoose}"  class="project mt10 mr10 ml10 pb15 bgfff">
      <div class="project-title">
        <div>
          <span class="ml10">项目{{index+1}}</span>
          <span class="ml15 blue">{{item.serviceType}}</span>
        </div>
        <div class="mark" ></div>
      </div>
      <ul class="project-content">
        <li class="rowflex mt15">
          <div class="ml10 c666">项目描述</div>
          <div class="ml15 project-info">{{item.serviceType}}</div>
        </li>
        <li class="rowflex mt15">
          <div class="ml10 c666">预计工时</div>
          <span class="ml15">{{item.predictTime == null ? '暂无' : item.predictTime}}</span>
          <div class="c666  project-money">费用</div>
          <span class="ml15" v-if="item.toll">{{item.toll+'元'}}</span>
          <span class="ml15" v-else>0元</span>

        </li>
      </ul>
    </section>
    <section class="ml10 mt10 c999 sum-money">
      费用总额为{{allToll}}元，已选项目金额{{chooseToll}}元
    </section>

    <section class="bottom_bar cfff " >
      <div class="buy-money">￥{{chooseToll}}元</div><div class="confirm-bar" @click="confirmOrder()">确认</div>
    </section>

    <div v-transfer-dom>
      <previewer :list="bigImgPath" ref="previewer" :options="options"></previewer>
    </div>
  </div>
</template>

<script>
    import {Confirm,TransferDom, Previewer} from 'vux'
    export default {
      name: "OrderConfirm",
      components: {Confirm,Previewer},
      directives: {
        TransferDom
      },
      data() {
        return{
          Gparam:{
            orderNum: 'YHBN123456',
            equipmentNum: '100016',
            equipmentName: 'ATM机-H68',
            enginerrName: '张三',
            enginerrNum: '18612363201',
            repairContent: '读卡器卡纸严重读卡器卡纸严重读卡器卡纸严重读卡器卡纸严重读卡器卡纸严重',
            images: [],
            vioce:{
              // vio: '1',
              // time: '12',
              // isRead: false,
            },
          },
          orderId: '',
          orderInfo: {
            engineer:{},
            equipment: {},
          },
          serviceList: [], //服务项目
          chooseToll: 0,
          allToll: new Number(),
          newForm: [],
          picPathList:[],
          picList: [],
          bigImgPath: [],
          //图片预览
          options: {
            getThumbBoundsFn(index) {
              let thumbnail = document.querySelectorAll('.orderConfirm .previewer-img')[index]
              let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
              let rect = thumbnail.getBoundingClientRect()
              return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
            }
          },
        }
      },
      methods: {
        //图片预览
        show(index) {
          console.log(index)
          this.$refs.previewer.show(index)
        },
        showBig() {
          this.showBigPicture = !this.showBigPicture;
        },
        confirmOrder: function (url) {
          this.$http.put('/work/api/workorder/confirmed/' + this.orderId, this.newForm).then(res => {
              if (this.$route.query.eng){
                this.$vux.toast.show({
                  text: '确认成功'
                })
                let that = this
                console.log(this.orderId)
                setTimeout(() => {
                  this.$router.push({path: '/engineer/enWorkingOrder', query: {orderId: this.orderId}})
                }, 500);
              } else {
                this.$router.push({path: '/user/repairSuccess', query: {type: "confirm"}})
              }
            }
          )
        },
        chooseService: function (item) {
          console.log(item.isChoose)
          var o = item.id
          if (item.isChoose){
            item.isChoose = false
            this.chooseToll -= item.toll // 已选项目总金额
            this.newForm.remove(o)
          } else {
            item.isChoose = true
            this.chooseToll += item.toll
            this.newForm.push(o)
          }
          console.log(this.newForm)
        }
      },
      mounted(){
        let id = this.$route.query.orderId
        this.orderId = id
        this.$http.get('/work/api/workorder/'+id).then(res=>{
            this.orderInfo = res.data.data
            if (this.orderInfo.repairFileStore) {
              let key = this.orderInfo.repairFileStore
              this.$http.get('/work/api/upload/byid?ids='+key).then(res=>{
                let result = res.data.data[key]
                for (var i = 0 ; i < result.length; i++){
                  this.picList.push(result[i].path)
                }
                //如果有多张则在预览图中显示
                this.bigImgPath = res.data.data[key].map(item => {
                  return {msrc: this._getPathNo(item.path), src:this._getPathNo(item.path)}
                })
              })
            }
          }
        )
        this.$http.get('/work/api/serviceitem/?noPage=true&workOrderId='+this.orderId).then(res=>{   // 服务项目
          for (var i = 0; i < res.data.data.length; i++){ //筛选未确认的服务项目
            if (res.data.data[i].status === 1) {
              this.serviceList.push(res.data.data[i])
            }
          }
          for (var i = 0; i < this.serviceList.length; i++){
            this.$set(this.serviceList[i], 'isChoose', true)
            this.allToll += this.serviceList[i].toll
            this.chooseToll += this.serviceList[i].toll
            this.newForm.push(this.serviceList[i].id)
          }
          console.log(this.serviceList)
        })
      },
    }

</script>

<style lang="less">
  .orderConfirm {
    font-size: 0.13rem;
    padding-bottom: 0.6rem;

    .top, .bottom {
      border-radius: 0.04rem;
      box-shadow: 0 0.02rem 0.04rem 0 #ebebeb;
    }
    .top-title, .project-title {
      padding-top: 0.08rem;
      height: 0.43rem;
      line-height: 0.35rem;
      font-size: 0.15rem;
      text-align: center;
      border-bottom: solid 1px #ebebeb;
    }
    .order-info {
      font-size: 0.15rem;
      border-bottom: solid 1px #ebebeb;
    }
    .order-info ul {
      border-bottom: solid 1px #eee;
    }
    .order-info ul li {
      margin-top: 0.15rem;
      line-height: 0.15rem;
    }
    .repair-content {
      width: 2.5rem;
      line-height: normal;
      margin-top: -0.03rem;
    }
    .order-info .info-item {
      width: 0.75rem;
    }
    .picAndvioce-box {
      width: 100%;
      padding-left: 0.1rem;
    }
    .pics {
      overflow-x: auto;
      margin-bottom: 0.15rem;
    }
    .picItem {
      width: 1.3rem;
      height: 0.85rem;
      margin-right: 0.05rem;
      margin-top: 0.15rem;
      border-radius: 0.025rem;
      background-size: cover !important;
      display: block;
    }
    .readVioce {
      background-color: #42a3fd;
      width: 0.9rem;
      height: 0.4rem;
      line-height: 0.4rem;
      color: #fff;
      -webkit-border-radius: 0.025rem;
      -moz-border-radius: 0.025rem;
      border-radius: 0.025rem;
    }
    .readVioce img {
      margin-left: 0.1rem;
      width: 0.3rem;
      height: 0.3rem;
    }
    .isRead {
      width: 0.12rem;
      height: 0.12rem;
      margin-left: 0.05rem;
      margin-top: 0.14rem;
      background-color: #fa4a30;
      -webkit-border-radius: 0.12rem;
      -moz-border-radius: 0.12rem;
      border-radius: 0.12rem;
    }

    .project {
      border-radius: 0.04rem;
      box-shadow: 0 0.02rem 0.04rem 0 #ebebeb;
      font-size: 0.15rem;
    }
    .project-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .project-info {
      width: 75%;
    }
    .project-money {
      margin-left: 0.65rem;
    }
    .mark {
      width: 0.16rem;
      height: 0.16rem;
      background: url("~assets/images/icon_nol@2x.png") no-repeat;
      -webkit-background-size: 100%;
      background-size: 100%;
      margin-right: 0.1rem;
    }
    .typeMark .mark {
      background: url("~assets/images/icon_sel@2x.png") no-repeat;
      -webkit-background-size: 100%;
      background-size: 100%;
    }
    .bottom-content li {
      line-height: 0.15rem;
      margin-top: 0.15rem;
      margin-left: 0.1rem;
    }
    .bottom-content li span {
      margin-left: 0.15rem;
    }
    .sum-money {

    }
    .bottom_bar {
      display: flex;
      width: 100%;
      background: #fff;
      line-height: 0.43rem;
      text-align: center;
      justify-content: flex-end;
    }
    .buy-money {
      color: #f95b5b;
    }
    .confirm-bar {
      width: 1.3rem;
      margin-left: 0.45rem;
      background-color: #42a3fd;
      font-size: 0.15rem;
    }
  }
</style>
